// 用例组件
<template>
  <div class="use-case-box" v-show="list.length">
    <year-switcher
      :list="yearList"
      @click-year="handleYearClick"
      :activeList="activeYearList"
    ></year-switcher>
    <!-- <div class="year-switcher">
      <div
        class="year-item"
        v-for="(year, index) in yearList"
        :key="index"
        @click="handleYearClick(index)"
      >
        {{ year }}
      </div>
    </div> -->
    <div class="service-switcher">
      <div
        v-for="(item, index) in serviceList"
        :key="index"
        class="use-case-item"
      >
        <!-- 判断style是否存在，不存在则灰色 -->
        <div
          class="use-case-circle"
          :style="{
            backgroundColor: '#2ea9ff',
          }"
        ></div>
        <div class="use-case-text">{{ item.serviceName }}</div>
        <el-checkbox
          v-model="item.is_checked"
          @change="handleChange(item)"
        ></el-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
import useCase from '@p/mock/useCase.json'
import cqzcq from '@p/geojson/cqzcq.json'
import { createPopup, addLegend } from '@u/map'
import D2C from 'd2c'
import YearSwitcher from './yearSwitcher.vue'
// import Axios from 'axios'
export default {
  name: 'use-case',
  inject: ['map'],
  components: {
    YearSwitcher,
  },
  props: {
    // 当前选中的menu
    menu: {
      type: Object,
      default() {
        return null
      },
    },
    data: {
      type: Array,
      default() {
        return []
      },
    },
    'map-click': {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
      popup: null,
      serviceIndex: 0,
      // yearList: ['2015年', '2016年', '2017年'],
      // serviceList: [],
    }
  },
  computed: {
    yearList() {
      return this.data.map((item) => item.year)
    },
    serviceList() {
      return this.data[this.serviceIndex].serviceList
    },
    // 计算已选中服务的年份
    activeYearList() {
      return this.data
        .filter((item) => {
          return item.serviceList.some((_) => _?.is_checked === true)
        })
        .map((i) => i.year)
    },
  },
  mounted() {
    this.initCase()
  },
  methods: {
    initCase() {
      this.list = this.data || []

      // 添加useCase中初始选中的数据
      // this.list.forEach(item => {
      //   if (item.is_checked) {
      //     this.handleChange(item);
      //   }
      // });
    },

    // 显示地图数据
    showGeojson(geo, item) {
      if (!geo.style) return false
      // 直接添加，添加成功设置该style的基本信息
      // Axios.get(geo.style).then(res=> {
      // this.map.addSprite(res.data.sprite, () => {
      //   console.log('添加雪碧图成功');
      this.map.addStyle(geo.id, geo.style, {
        onload: (res) => {
          // 雪碧图
          console.log(res)
          // 将对应的图例保存在item.legendControl
          item.legendControl = addLegend(this.map, res.layers)
          // 添加成功
          // console.log(res)
          // this.map.flyTo({
          //   center: res.center,
          //   zoom: res.zoom,
          // })
        },
      })
      // })
      // })
    },

    // checkbox选择事件
    handleChange(item) {
      if (item.is_checked) {
        console.log(1)
        // 不是 '各中心城区指标'，绘制各种的stylejson，并通过legendControl自动判断添加图例
        // let geojson = useCase[item.geojson]
        let geo = {
          id: item.pkid, // 用作图层的数据源id和图层id
          style: item.serviceUrl,
        }
        // let geo = {
        //   id: item.pkid,
        //   style:
        //     'http://103.131.169.87:89/oms/static/stylejson/696d3e41-7b42-4303-b514-49577f9a2ec5.json',
        // };
        // 在地图显示该数据
        this.showGeojson(geo, item)
      } else {
        // 非'各中心城区指标'，移除所点击stylejson数据
        this.map.removeStyle(item.pkid)
        // 移除popup
        if (this.popup) {
          this.popup.remove()
        }
        // 移除legendControl
        if (item.legendControl) {
          item.legendControl.onRemove(this.map)
          item.legendControl = null
        }
      }
    },
    // handleChange(item) {
    //   // 选中指标，显示对应的地图数据
    //   if (item.is_checked) {
    //     // 选中的是 各中心城区指标，单独处理（用例处理+地图渐变效果处理）
    //     if (item.serviceName === '各中心城区指标') {
    //       this.addCenterGeo(item);
    //       return false;
    //     }

    //     // 添加地图点击事件，显示属性查询信息
    //     if (this.mapClick) {
    //       this.map.on('click', this.mapClickEvent);
    //     }

    //     // 不是 '各中心城区指标'，绘制各种的stylejson，并通过legendControl自动判断添加图例
    //     // let geojson = useCase[item.geojson]
    //     let geo = {
    //       id: item.pkid, // 用作图层的数据源id和图层id
    //       style: item.serviceUrl,
    //     };
    //     // 在地图显示该数据
    //     this.showGeojson(geo, item);
    //   } else {
    //     console.log(item);
    //     if (item.name === '各中心城区指标' || item.serviceName === '各中心城区指标') {
    //       // '各中心城区指标' 取消，移除图层、数据源和legendControl
    //       this.removeCenterGeo(item);
    //       if (item.legendControl) {
    //         item.legendControl.onRemove(this.map);
    //         item.legendControl = null;
    //       }
    //       return false;
    //     }

    //     // 非'各中心城区指标'，移除所点击stylejson数据
    //     this.map.removeStyle(item.id);

    //     // 移除popup
    //     if (this.popup) {
    //       this.popup.remove();
    //     }
    //     // 移除legendControl
    //     if (item.legendControl) {
    //       item.legendControl.onRemove(this.map);
    //       item.legendControl = null;
    //     }
    //   }
    // },

    // 各中心城区指标，单独处理
    addCenterGeo(item) {
      console.log(item)
      let useCaseOrigin = null
      if (item.layer_source) {
        useCaseOrigin = {
          data: JSON.parse(item.layer_source),
        }
      } else {
        useCaseOrigin = useCase[item.geojson]
      }

      console.log(useCaseOrigin)
      let {
        data: { key = '', order = true, value = [] },
      } = useCaseOrigin
      if (!key && !value.length) return false
      // 获取value中最大的值，并进行分段处理，作为表达式
      let maxArr = value.map((item) => parseInt(item.data))
      let maxData = Math.max(...maxArr)
      let cases = 5 // 分段大小

      let casesArr = []
      let casesSize = parseInt(maxData / cases)
      for (let i = 0; i <= cases; i++) {
        let res = i * casesSize
        casesArr.push(res)
      }

      let expression = ['step', ['get', key]]
      // 将指标名称及数据拼接到主城区geojson上
      cqzcq.features.forEach((item) => {
        let res = value.find((i) => i.id === item.properties.id)
        if (res) {
          item.properties[key] = parseFloat(res.data)
        }
      })

      // 绘制表达式
      expression.push('rgba(0,0,0,0)')

      // 根据order，判断是多好还是少好，好：绿，坏：红
      casesArr.forEach((item) => {
        let value = (item / maxData) * 255
        let color = ''
        if (order) {
          color = `rgba(${255 - parseInt(value)}, ${parseInt(value)}, 0 , 1)`
        } else {
          color = `rgba(${parseInt(value)}, ${255 - parseInt(value)}, 0 , 1)`
        }
        expression.push(item, color)
      })

      this.map.addSource('xxxx', {
        type: 'geojson',
        data: cqzcq,
      })
      // 添加主城区，指标图层
      this.map.addLayer({
        id: 'xxxx',
        type: 'fill',
        source: 'xxxx',
        paint: {
          'fill-color': expression,
          'fill-outline-color': '#2071A7',
          'fill-translate': [-12, -5],
        },
      })

      // 添加图例
      setTimeout(() => {
        item.legendControl = addLegend(this.map, 'xxxx')
      }, 100)
    },

    removeCenterGeo() {
      console.log(123)
      if (this.map.getLayer('xxxx')) {
        console.log(1232)

        this.map.removeLayer('xxxx')
        this.map.removeSource('xxxx')
      }
    },

    // 添加地图点击事件
    mapClickEvent(e) {
      const result = this.map.queryRenderedFeatures(e.point)
      console.log(result)
      // 创建popup
      if (!this.popup) {
        this.popup = new D2C.Popup({ closeOnClick: false })
      }
      const html = createPopup(result.slice(0, 1))
      this.popup.setLngLat(e.lngLat).setHTML(html).addTo(this.map)
    },

    handleYearClick(index) {
      this.serviceIndex = index
      // console.log(index);
      // this.serviceList = this.data[index].serviceList;
    },

    // 销毁组件，清除相关资源
    destroyedRemove() {
      // 销毁前，移除已有styleJson
      this.list.forEach((item) => {
        // 获取item.geojson
        let style = this.map.getStyle(item.id + '') // 处理为字符串
        if (style) {
          this.map.removeStyle(item.id)
        }

        // 请求携带的legendControl
        if (item.legendControl) {
          item.legendControl.onRemove(this.map)
          item.legendControl = null
        }
      })
      // 销毁前，移除点击查询
      if (this.mapClick) {
        this.map.off('click', this.mapClickEvent)
      }
      if (this.popup) {
        this.popup.remove()
      }
      // 清除绘制的渐变图层和资源
      this.removeCenterGeo()
    },
  },
  beforeDestroy() {
    this.destroyedRemove()
  },
}
</script>

<style lang="scss">
.use-case-box {
  position: absolute;
  bottom: 20px;
  left: 20px;
  // width: 210px;
  max-height: 226px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  padding: 0 9px;
  overflow-y: auto;
  display: flex;
  // .year-switcher {
  //   width: 75px;
  //   .year-item {
  //     text-align: center;
  //     padding: 8px 4px;
  //     box-sizing: border-box;
  //     // color: #02a7f0;
  //     // background: #e4f8ff;
  //   }
  // }
  .service-switcher {
    justify-content: center;
    display: flex;
    flex-direction: column;
    .use-case-item {
      display: flex;
      align-items: center;
      padding: 8px 0;
      width: 150px;
      margin-left: 9px;
      .use-case-circle {
        width: 8px;
        height: 8px;
        background: #2ea9ff;
        border-radius: 50%;
        margin-right: 5px;
      }
      .use-case-text {
        width: calc(100% - 13px - 16px - 5px);
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        margin-right: 5px;
        color: #848a9f;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
</style>
